<template>
  <HuilanBasic :left-width="300">
    <template v-slot:left>
      <div class="interfaceDescription">
        <div :style="tabclenHei">
          <el-scrollbar>
            <el-menu :default-active="menuId" class="el-menu-vertical-demo" @select="select" @close="handleClose">
              <el-submenu index="1">
                <template slot="title">
                  <span>AI能力</span>
                </template>
                <template v-for="(v, i) of menuList">
                  <el-tooltip v-if="v.name.length > commonVariable.labelLength" class="item" :key="i" effect="dark"
                    :content="v.name" placement="right">
                    <el-menu-item style="
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                      " :index="v.code">{{ v.name }}</el-menu-item>
                  </el-tooltip>
                  <template v-else>
                    <el-menu-item :key="i" style="
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                      " :index="v.code">{{ v.name }}</el-menu-item>
                  </template>
                </template>
              </el-submenu>
            </el-menu>
          </el-scrollbar>
        </div>
      </div>
    </template>
    <div :style="tabclenHeiRi" class="interfaceDescription">
      <div class="btnRi">
        <el-button size="small" type="" @click="camcel">返回</el-button>
      </div>
      <el-tabs tab-position="top">
        <el-tab-pane label="文档">
          <div class="box">
            <!-- <el-scrollbar> -->
              <Doc ref="doc" :docDataJson="docDataJson" style="margin-right: 18px"></Doc>
            <!-- </el-scrollbar> -->
          </div>
        </el-tab-pane>
        <el-tab-pane label="调试">
          <div class="box">
            <!-- <el-scrollbar> -->
              <Debugging ref="debugging" :debuggingDataJson="debuggingDataJson" style="margin-right: 18px"></Debugging>
            <!-- </el-scrollbar> -->
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </HuilanBasic>
</template>

<script>
import Doc from "./conponent/doc.vue";
import Debugging from "./conponent/aiClassiDebugger";
import {
} from "@/api/configure/application";
import commonVariable from "@/util/commonVariable";
const tabclenHei = document.body.clientHeight - 200;
const tabclenHeiRi = document.body.clientHeight - 200;
import { mapState } from 'vuex'
export default {
  name: "interfaceDescription",
  components: {
    Doc,
    Debugging,
  },
  props: {
    rowData: {
      type: Object,
    },
  },
  inject: ['swichInterFacePage'],
  data() {
    return {
      tabclenHei: `height:${tabclenHei}px`,
      tabclenHeiRi: `height:${tabclenHeiRi}px`,
      commonVariable,
      menuList: [
        {
          name: "智能分类模型",
          code: "1",
        }
      ],
      menuId: "1",
      dataJson: {

      },
      docDataJson: {

      },
      debuggingDataJson: {
        api: '/aicos/api/aicos-ai/aiClassify/startAnalysis',
        RequestBody: {}
      },
      abilityCode: null,
      headerTitle: '',
    };
  },
  computed: {
    ...mapState({
      curentRouterPage(state) {
        return state.aiMagement.curentRouterPage
      },
    }),
  },
  watch: {
    rowData(newName, oldName) {
      console.log(newName, oldName);
    }
  },
  mounted() {
    // 收起左侧菜单
    // if (!this.$store.getters.isCollapse) {
    //   this.$store.commit("SET_COLLAPSE");
    // }
    this.select()
  },
  methods: {
    select() {
      this.docDataJson = {
        api: '/aicos/api/aicos-ai/aiClassify/startAnalysis',
        RequestBody: {
          "threshold": 0.5,
          "id": "1742823145548574721",
          "level": 1,
          "content": "旅客来电表示，携程购票，需要购买国航航班，选择的是国航航班，出票后是代码共享西藏航空的航班，旅客不认可，要求投诉航司。"
        },
        RequestBodyTabList: [
          {
            name: "threshold",
            explain: "输入0.01与1之间，值越高，准确率越高",
            type: "",
            flag: "true",
            dataType: "integer",
            schema: "",
          },
          {
            name: "id",
            explain: "智能分类类别",
            type: "",
            flag: "true",
            dataType: "string",
            schema: "",
          },
          {
            name: "level",
            explain: "末级分类",
            type: "",
            flag: "true",
            dataType: "integer",
            schema: "",
          },
          {
            name: "content",
            explain: "待分类内容",
            type: "",
            flag: "true",
            dataType: "string",
            schema: "",
          },
        ],
        responseStatus: [
          {
            code: "200",
            message: "成功",
            schema: "",
          },
          {
            code: "400",
            message: "请求参数错误",
            schema: "",
          },
          {
            code: "500",
            message: "服务器内部错误",
            schema: "",
          }
        ],
        responseParameter: [
          {
            name: "code",
            message: "状态码",
            type: "integer",
            schema: "",
          },
          {
            name: "message",
            message: "说明",
            type: "string",
            schema: "",
          },
          {
            name: "data",
            message: "数据",
            type: "object",
            schema: "",
          }
        ],
        example: {
          "data": {
            "code": 200,
            "success": true,
            "data": "票务服务",
            "msg": "操作成功"
          },
          "status": 200,
          "statusText": "OK",
          "headers": {
            "connection": "close",
            "content-type": "application/json",
            "date": "Wed, 10 Jan 2024 01:55:19 GMT",
            "server": "sa-server",
            "transfer-encoding": "chunked",
            "x-content-type-options": "nosniff",
            "x-frame-options": "1; mode=block",
            "x-powered-by": "Express"
          },
          "config": {
            "transformRequest": {},
            "transformResponse": {},
            "timeout": 60000,
            "xsrfCookieName": "XSRF-TOKEN",
            "xsrfHeaderName": "X-XSRF-TOKEN",
            "maxContentLength": -1,
            "headers": {
              "Accept": "application/json, text/plain, */*",
              "Content-Type": "application/json;charset=utf-8",
              "Authorization": "Basic SHVpbGFuQWljb3M6aHVpbGFuX3NlY3JldA==",
              "satoken": "c6fae688-ce5f-4071-a84e-8e84acaa9f9f",
              "context-language": "zh_CN",
              "Timestamp": 1704851564388,
              "Sign": "5a9fd8408d39ab1f0b18353d133beb5a",
              "EncryptType": "nsm"
            },
            "method": "post",
            "url": "/aicos/api/aicos-ai/aiClassify/startAnalysis",
            "data": "{\"threshold\":0.5,\"id\":\"1742823145548574721\",\"level\":1,\"content\":\"旅客来电表示，携程购票，需要购买国航航班，选择的是国航航班，出票后是代码共享西藏航空的航班，旅客不认可，要求投诉航司。\",\"abilityCode\":\"startAnalysis\"}",
            "huilanIsHandledRequest": true,
            "withCredentials": true,
            "huilanIsHandledResponse": true
          },
          "request": {}
        },
      }
      this.debuggingDataJson['RequestBody'] = {
        "threshold": 0.5,
        "id": "1742823145548574721",
        "level": 1,
        "content": "旅客来电表示，携程购票，需要购买国航航班，选择的是国航航班，出票后是代码共享西藏航空的航班，旅客不认可，要求投诉航司。"
      }
      this.debuggingDataJson['RequestBody']['abilityCode'] = 'startAnalysis'
    },
    camcel() {
      // this.$router.push({ path: '/configure/semantics/nlp', query: { code: 'intelligentClassification' } })
      this.swichInterFacePage('1', this.classifyId)
    }
  },
};
</script>

<style lang="scss" scoped>
.btnRi {
  // margin-bottom: 20px;
  text-align: right;
  margin-right: 20px;
}

.interfaceDescription {
  padding: 20px;
  // overflow-y: auto;
  .el-menu-item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.box {
  margin-top: 20px;
}
/deep/ .el-tabs__item {
  width: 70px;
  text-align: center;
}

/deep/ .el-submenu .el-menu-item {
  padding-right: 0;
}

/deep/ .el-tabs__header {
  margin-right: 18px;
}
</style>
